/* ============================================================ DESIGN TOKENS — VORTEX TABLE TENNIS Identidad: tema oscuro, negro + dorado + blanco, minimalista premium. Estos tokens se cargan en todas las páginas (este archivo es el primero en el ) y son la fuente única de verdad del sistema visual. ============================================================ */ :root{ /* Color de marca */ --color-negro: #000000; --color-negro-suave: #0a0a0a; --color-dorado: #FFD700; --color-dorado-fuerte: rgba(255, 215, 0, 0.85); --color-blanco: #FFFFFF; /* Superficies */ --superficie-0: #000000; --superficie-1: rgba(255, 255, 255, 0.03); --superficie-2: rgba(255, 255, 255, 0.05); --superficie-2-hover: rgba(255, 255, 255, 0.07); --borde-dorado-sutil: rgba(255, 215, 0, 0.25); --borde-dorado: rgba(255, 215, 0, 0.35); --borde-dorado-fuerte: rgba(255, 215, 0, 0.6); /* Texto */ --texto-primario: #FFFFFF; --texto-secundario: rgba(255, 255, 255, 0.75); --texto-terciario: rgba(255, 255, 255, 0.55); /* Semántico */ --color-exito: var(--color-dorado); --color-error: #ff6b6b; --color-advertencia: #ffa94d; --color-info: #63b3ed; /* Tipografía */ --fuente-display: "Azonix", sans-serif; --fuente-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Espaciado — múltiplos de 8px */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; /* Radios */ --radio-sm: 10px; --radio-md: 16px; --radio-lg: 20px; --radio-pill: 50px; /* Sombras */ --sombra-sm: 0 4px 14px rgba(0, 0, 0, 0.3); --sombra-md: 0 10px 30px rgba(0, 0, 0, 0.4); --sombra-brillo-sm: 0 0 14px rgba(255, 215, 0, 0.3); --sombra-brillo-md: 0 0 22px rgba(255, 215, 0, 0.4); /* Transiciones */ --transicion-rapida: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transicion-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* RESET */ *{ box-sizing: border-box; margin: 0; padding: 0; } [hidden]{ display: none !important; } html{ scroll-behavior: smooth; } ::selection{ background: var(--color-dorado); color: var(--color-negro); } /* FUENTE */ @font-face { font-family: "Azonix"; src: url("FONT/Azonix.otf") format("opentype"); font-display: swap; } /* ACCESIBILIDAD: oculta visualmente pero deja el texto disponible para lectores de pantalla */ .sr-only{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* BODY */ body{ min-height: 100vh; background-color: var(--superficie-0); background-image: radial-gradient(circle at 50% 0%, rgba(255, 215, 0, 0.08), transparent 60%); background-repeat: no-repeat; color: var(--texto-primario); font-family: var(--fuente-texto); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* NAVBAR */ header{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 10px 10%; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 215, 0, 0.12); position: sticky; top: 0; z-index: 100; } /* LOGO */ .ICONO{ width: 120px; cursor: pointer; transition: filter var(--transicion-base); } .ICONO:hover{ filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)); } .ICONO-footer{ width: 60px; } /* MENÚ */ .Lista_NAV{ list-style: none; display: flex; flex-wrap: wrap; } .Lista_NAV li{ display: inline-block; padding: 0 15px; } .Lista_NAV li a{ font-family: var(--fuente-display); font-size: 15px; letter-spacing: 0.3px; color: rgba(255, 217, 0, 0.65); text-decoration: none; transition: color var(--transicion-base), text-shadow var(--transicion-base); text-shadow: 0 0 5px rgba(255, 215, 0, 0.2); } .Lista_NAV li a:hover, .Lista_NAV li a:focus-visible{ color: var(--color-dorado); text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 15px rgba(255, 215, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.4); } /* BOTONES */ button{ -webkit-appearance: none; appearance: none; padding: 9px 25px; background-color: var(--color-dorado-fuerte); border: none; border-radius: var(--radio-pill); cursor: pointer; font-family: var(--fuente-display); letter-spacing: 0.3px; color: var(--color-negro); transition: background-color var(--transicion-base), transform var(--transicion-base), box-shadow var(--transicion-base); } button:hover, button:focus-visible{ background-color: var(--color-dorado); transform: scale(1.05); box-shadow: var(--sombra-brillo-sm); } button:focus-visible{ outline: 2px solid var(--color-dorado); outline-offset: 2px; } button:active{ transform: scale(0.98); } /* HERO */ .hero{ text-align: center; padding: 160px 10% 100px; scroll-margin-top: 30px; } .hero h1{ font-family: var(--fuente-display); font-size: 48px; letter-spacing: 0.5px; color: var(--color-dorado); text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 25px rgba(255, 215, 0, 0.4); } .hero-subtitulo{ max-width: 600px; margin: var(--space-2) auto 35px; color: var(--texto-secundario); font-size: 17px; line-height: 1.6; } .hero-acciones{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } .boton-principal, .boton-secundario{ padding: 12px 30px; border-radius: var(--radio-pill); font-family: var(--fuente-display); letter-spacing: 0.3px; text-decoration: none; transition: background-color var(--transicion-base), transform var(--transicion-base), box-shadow var(--transicion-base); } .boton-principal{ background-color: var(--color-dorado-fuerte); color: var(--color-negro); } .boton-principal:hover, .boton-principal:focus-visible{ background-color: var(--color-dorado); transform: scale(1.05); box-shadow: var(--sombra-brillo-sm); } .boton-secundario{ border: 2px solid var(--color-dorado); color: var(--color-dorado); background: transparent; } .boton-secundario:hover, .boton-secundario:focus-visible{ background-color: rgba(255, 215, 0, 0.15); transform: scale(1.05); } /* FUNCIONALIDADES */ .funcionalidades{ padding: 80px 10% 100px; background-color: rgba(0, 0, 0, 0.6); scroll-margin-top: 30px; } .funcionalidades h2{ text-align: center; font-family: var(--fuente-display); letter-spacing: 0.4px; color: var(--color-dorado); margin-bottom: var(--space-6); } .tarjetas{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } .tarjeta{ flex: 1 1 240px; max-width: 300px; background: var(--superficie-1); border: 1px solid var(--borde-dorado); border-radius: var(--radio-md); padding: 30px 25px; text-align: center; transition: transform var(--transicion-base), border-color var(--transicion-base), box-shadow var(--transicion-base), background-color var(--transicion-base); scroll-margin-top: 30px; } .tarjeta:hover{ transform: translateY(-6px); border-color: var(--color-dorado); background: var(--superficie-2); box-shadow: var(--sombra-brillo-md); } .icono-tarjeta{ width: 42px; height: 42px; color: var(--color-dorado); margin-bottom: var(--space-2); } .tarjeta h3{ font-family: var(--fuente-display); color: var(--color-dorado); margin-bottom: 12px; font-size: 17px; } .tarjeta p{ color: var(--texto-secundario); font-size: 14px; line-height: 1.5; } .tarjeta-enlace{ display: inline-block; margin-top: 14px; font-size: 13px; color: var(--color-dorado); text-decoration: none; letter-spacing: 0.3px; transition: opacity 0.2s; } .tarjeta-enlace:hover{ opacity: 0.7; } /* FOOTER */ footer{ text-align: center; padding: var(--space-5) 10%; background-color: var(--color-negro); border-top: 1px solid var(--borde-dorado); } footer p{ margin-top: 10px; color: var(--texto-terciario); font-size: 13px; } /* MODALES */ .modal{ display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); justify-content: center; align-items: flex-start; padding: 20px 15px; overflow-y: auto; z-index: 9999; animation: fadeModal 0.3s ease; } .formulario{ width: 420px; max-width: 100%; padding: 35px; margin: auto; background: rgba(10, 10, 10, 0.95); border: 1px solid var(--borde-dorado-fuerte); border-radius: var(--radio-lg); text-align: center; box-shadow: var(--sombra-md), 0 0 30px rgba(255, 215, 0, 0.25); animation: entradaFormulario 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .formulario h2{ color: var(--color-dorado); font-family: var(--fuente-display); letter-spacing: 0.3px; margin-bottom: var(--space-3); } .formulario form{ display: flex; flex-direction: column; gap: 15px; } .formulario input{ padding: 12px 14px; border-radius: var(--radio-sm); border: 1px solid rgba(255, 215, 0, 0.4); background: var(--superficie-2); color: var(--texto-primario); font-family: var(--fuente-texto); font-size: 14px; outline: none; transition: border-color var(--transicion-base), box-shadow var(--transicion-base), background-color var(--transicion-base); } .formulario input::placeholder{ color: rgba(255, 255, 255, 0.45); } .formulario input:hover{ background-color: var(--superficie-2-hover); } .formulario input:focus-visible{ border-color: var(--color-dorado); background-color: var(--superficie-2-hover); box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15); } /* CAMPO DE CONTRASEÑA CON ICONO DE MOSTRAR/OCULTAR */ .campo-password{ position: relative; } .campo-password input{ width: 100%; padding-right: 44px; } .alternar-password{ all: unset; position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: rgba(255, 255, 255, 0.6); box-sizing: border-box; -webkit-tap-highlight-color: transparent; transition: color var(--transicion-base), background-color var(--transicion-base); } .alternar-password:hover, .alternar-password:focus-visible{ color: var(--color-dorado); background-color: rgba(255, 215, 0, 0.1); } .icono-ojo{ width: 20px; height: 20px; pointer-events: none; } /* SEPARADOR Y BOTONES DE REDES SOCIALES */ .separador-social{ display: flex; align-items: center; gap: 12px; margin-top: var(--space-2); color: rgba(255, 255, 255, 0.5); font-size: 13px; } .separador-social::before, .separador-social::after{ content: ""; flex: 1; height: 1px; background: rgba(255, 215, 0, 0.3); } .botones-social{ display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-2); } .boton-social{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; background: var(--color-blanco); color: #1f1f1f; font-family: var(--fuente-texto); font-size: 14px; width: 100%; transition: background-color var(--transicion-base), transform var(--transicion-base); } .boton-social:hover, .boton-social:focus-visible{ background: #f1f1f1; transform: scale(1.02); } .icono-social{ width: 20px; height: 20px; min-width: 20px; min-height: 20px; max-width: 20px; max-height: 20px; flex-shrink: 0; display: block; overflow: hidden; } .mensaje-error{ color: var(--color-error); font-size: 13px; text-align: left; } .cerrar{ float: right; background: transparent; color: var(--color-dorado); font-size: 30px; line-height: 1; padding: 0 6px; cursor: pointer; transition: color var(--transicion-base), transform var(--transicion-base); } .cerrar:hover, .cerrar:focus-visible{ background: transparent; color: var(--color-blanco); transform: none; } .texto-modal{ margin-top: var(--space-2); color: var(--color-blanco); font-size: 14px; } .texto-modal a{ color: var(--color-dorado); text-decoration: none; } .texto-modal a:hover{ text-shadow: 0 0 10px var(--color-dorado); } @keyframes fadeModal{ from{ opacity: 0; } to{ opacity: 1; } } @keyframes entradaFormulario{ from{ opacity: 0; transform: translateY(50px) scale(.9); filter: blur(5px); } to{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* RESPONSIVE */ @media (max-width: 768px){ header{ justify-content: center; text-align: center; padding: 15px 5%; } .Lista_NAV{ justify-content: center; } .hero{ padding: 140px 6% 80px; } .hero h1{ font-size: 34px; } .funcionalidades{ padding: 60px 6% 80px; } .formulario{ padding: 28px 22px; } } @media (max-width: 480px){ .hero h1{ font-size: 28px; } .hero-subtitulo{ font-size: 15px; } .hero-acciones{ flex-direction: column; align-items: center; } .modal{ padding: 12px 10px; } .formulario{ padding: 22px 16px; border-radius: 16px; } .formulario h2{ font-size: 18px; margin-bottom: 18px; } .formulario form{ gap: 12px; } .boton-social{ font-size: 13px; padding: 9px 16px; } .Lista_NAV li{ padding: 0 8px; } .Lista_NAV li a{ font-size: 13px; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }